<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" 
    prefix="c" %> 
<%!
java.util.Map starredPhotos = new java.util.HashMap();
java.util.Map blockedPhotos = new java.util.HashMap();
%>
<%
String action = request.getParameter("action");
if (action == null || action.equals("")) {
	action = "byTag";
}
java.util.List photos = new java.util.ArrayList();
pageContext.setAttribute("photos", photos);
if (action.equals("byTag")) {
	String apiKey = "e94253c1c6cd536e351aa93b6c972a1d";
	com.aetrion.flickr.Flickr flickr = new com.aetrion.flickr.Flickr(apiKey);
	com.aetrion.flickr.photos.PhotosInterface photosInterface = flickr.getPhotosInterface();
	com.aetrion.flickr.photos.SearchParameters params = new com.aetrion.flickr.photos.SearchParameters();
	String tag = request.getParameter("tag");
	if (tag == null || tag.equals("")) {
		tag = "cool";
	}
	params.setTags(new String[] { tag });
	int perPage = 10;
	int pageIndex = 0;
	java.util.List photoList = photosInterface.search(params, perPage, pageIndex);
	for (Object object : photoList) {
	 	java.util.Map photoMap = new java.util.HashMap();
	 	com.aetrion.flickr.photos.Photo photo = (com.aetrion.flickr.photos.Photo) object;
	 	photoMap.put("url",	photo.getSmallSquareUrl());
		String id = photo.getId();
	 	photoMap.put("id", id);
	 	Boolean starred = (Boolean) starredPhotos.get(id);
	 	photoMap.put("starred", starred == null ? Boolean.FALSE : starred);
		if (blockedPhotos.get(id) == null) {
		 	photos.add(photoMap);
		}
	}
} else if (action.equals("setStar")) {
 	starredPhotos.put(request.getParameter("id"), Boolean.parseBoolean(request.getParameter("starred")));	
} else if (action.equals("setBlock")) {
 	blockedPhotos.put(request.getParameter("id"), Boolean.TRUE);
}
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Search by Tag</title>
<script type="text/javascript" src="js/prototype/prototype.js"></script>

<script type="text/javascript" src="js/prototype/scriptaculous.js"></script>
<script type="text/javascript" src="js/prototype/builder.js"></script>
<script type="text/javascript" src="js/prototype/controls.js"></script>
<script type="text/javascript" src="js/prototype/effects.js"></script>

<script type="text/javascript" src="js/prototype/slider.js"></script>
<script type="text/javascript" src="js/prototype/dragdrop.js"></script>

<link rel="stylesheet" href="css/main.css"></link>
</head>
<body onload="Element.hide('indicator')">
<img id="indicator" src="images/spinner.gif" />

<form name="searchByTagForm" action="search.jsp" method="get">
<input type="hidden" name="action" value="byTag"/>
<label for="tag">Tag:</label>
<input type="text" name="tag" value="${param.tag}" />
<input type="submit" value="Go" />
</form>

<form name="setStarsAndBlocks" action="search.jsp" method="post">
<input type="hidden" name="action" value="setStarsAndBlocks"/>
<ul>
<c:forEach var="photo" items="${pageScope.photos}">
<li>
<img
	id="img_${photo.id}" class="images"
	src="${photo.url}"
/>
<script type="text/javascript">
new Draggable('img_${photo.id}', {revert:false})
</script>
<img 
	class="starImage"
	src="images/${photo.starred ? 'checked.gif' : 'unchecked.gif'}" 
	onclick="
		var checkbox = $('check_${photo.id}')
		checkbox.checked = !checkbox.checked
		this.src = 'images/' + (checkbox.checked ? 'checked.gif' : 'unchecked.gif')"
/>
<input
		class="starCheckbox"
		id="check_${photo.id}" 
		type="checkbox" 
		name="starred" 
		value="${photo.id}" 
		${photo.starred ? "checked" : ""}/>
<input class="blockCheckbox" type="checkbox" name="blocked" value="${photo.id}" />
<script type="text/javascript">
new Form.Element.Observer(
	$("check_${photo.id}"), 0.2, function() {
		var id = '${photo.id}'
		var starred = $("check_${photo.id}").checked
		
		new Ajax.Request(
			'search.jsp', {
				method: 'post',
				parameters: 'action=setStar&id=' + id + '&starred=' + starred,
				onLoading: function(request) {
					Element.show('indicator')},
				onComplete: function(request) {
					Element.hide('indicator')}
			}
		)
	}
)
</script>
</li>
</c:forEach>
</ul>
<input class="starButton" type="submit" value="Set stars"/>
</form>

<img id='recycle' src="images/recyclebin.gif" />
<script type="text/javascript">
Droppables.add(
	'recycle',
	{
		accept:'images',
		onDrop:function(element) {
			var id = element.id.split('_')[1]
			new Ajax.Request(
				'search.jsp',
				{
					onLoading:function(request) {
						Element.show('indicator');
					},
					onComplete:function(request) {
						Element.hide('indicator');
						new Effect.Fade(element.parentNode);
					},
					parameters: 'action=setBlock&id=' + id
				}
			)
		}
	}
)
</script>
</body>
</html>